<!-- 我的图表 -->

<template>
  <EasyChart :baseOption="OPTION" :option="option" />
</template>

<script>
// ============================== 导入依赖 ============================== //

import OPTION, { COLOR, COLOR_TOP, COLOR_TEXT } from './OPTION'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyChart',

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 基础配置
     */
    OPTION: () => OPTION,

    /**
     * 图表配置
     */
    option() {
      const { xData, dataList: [list1, list2], unit } = this
      const getColor = (i) => COLOR[list2[i] > list1[i] ? 1 : 0]
      const getColorTop = (i) => COLOR_TOP[list2[i] > list1[i] ? 1 : 0]
      const getColorText = (i) => COLOR_TEXT[list2[i] > list1[i] ? 1 : 0]

      return {
        xAxis: { data: xData },
        yAxis: {
          name: `单位：${unit}`,
        },
        series: [
          { data: list1 }, // 背景柱形
          { data: list2.map((value, i) => ({ value, itemStyle: { color: getColor(i) } })) }, // 前景柱形
          { data: list1.map((value, i) => (list2[i] > list1[i] ? value : 0)) }, // 被遮挡的背景柱形 (未遮挡的数值置 0)
          { data: list1 }, // 背景顶盖
          {
            data: list2.map((value, i) => ({ // 前景顶盖
              value,
              itemStyle: { color: getColorTop(i) },
              label: {
                color: getColorText(i),
                formatter: (param) => {
                  const index = param.dataIndex
                  if (!list1[index]) return ''
                  const percent = (list2[index] * 100 / list1[index]).toFixed(2)
                  return `${+percent}%`
                },
              },
            })),
          },
        ],
      }
    },
  },
}
</script>
